<template>
	<div class="app">
		<myNavbar title="订单详情"></myNavbar>
		<list>
			<cell>
				<div class="details_box">
					<div class="details_box_header_bg bg_linear_gradient_header"></div>
					<div class="details_status">
						<text class="details_status_title">{{orderForm.statusDescr}}</text>
						<text v-if="orderForm.statusDescr =='待付款'" class="details_status_subtitle">超时30分钟未付款，订单将自动取消</text>
						<text v-if="orderForm.statusDescr =='待发货'" class="details_status_subtitle">订单已确认，卖家会尽快安排发货</text>
						<text v-if="orderForm.statusDescr =='待收货'" class="details_status_subtitle">卖家已发货，超时未签收系统将自动确认</text>
						<text v-if="orderForm.statusDescr =='待评价'" class="details_status_subtitle">交易已完成，您的五星好评是最大支持</text>
					</div>
					<div style="padding-left: 50px">
						<text class="orderDate" v-if="orderForm.statusDescr =='待付款' &&  timeType == false">剩{{left_time}}自动关闭</text>
					</div>
					<div>
						<div class="details_information" v-if="orderLog.length !=0">
							<div class="details_information_content" v-for="(item,index) in orderLog">
								<div class="details_information_left">
									<div :class="[index == 0 ?'details_information_round_current':'details_information_round']">

										<text v-if="item.type==0" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe606;</text>
										<text v-if="item.type==1" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe631;</text>
										<text v-if="item.type==2 || item.type==7" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe66e;</text>
										<text v-if="item.type==3" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe69f;</text>
										<text v-if="item.type==4" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe6ea;</text>
										<text v-if="item.type==5" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe625;</text>
										<text v-if="item.type==6" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe614;</text>
										<text v-if="item.type==8" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe664;</text>
										<text v-if="item.type==9" :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe612;</text>
									</div>
									<div v-if="index+1 != orderLog.length" :class="[index == 0?'details_information_line_current':'details_information_line']"></div>
								</div>
								<div class="details_information_text">
									<text :class="[index==0?'details_information_title_current':'details_information_title']">{{item.content}}</text>
									<text :class="[index==0?'details_information_title_current':'details_information_title']">{{item.createDate}}</text>
								</div>
							</div>
						</div>
					</div>

					<div>
						<div class="details_address" v-if="orderForm.areaName !=nuderfind">
							<div class="details_address_top">
								<text class="details_address_name">{{orderForm.consignee}}</text>
								<text class="details_address_phone">{{orderForm.phone}}</text>
							</div>
                            <div class="details_stores" v-if="orderForm.shippingMethod == 1">
                                <text class="details_stores_title">自提店：{{shopName}}</text>
                                <view class="details_stores_botton" @click="toCall">
                                    <text class="details_stores_botton_title">联系门店</text>
                                    <text class="details_stores_icon">&#xe64b;</text>
                                </view>
                            </div>
							<div class="details_address_bottom">
								<text class="details_address_title" v-if="orderForm.shippingMethod != 1">{{orderForm.address}}</text>
                                <text class="details_address_title" v-if="orderForm.shippingMethod == 1">门店地址：{{orderForm.address}}</text>
							</div>
                            <text class="details_shipping_right_name" v-if="orderForm.shippingMethod == 1">如果您购买的商品有任何问题，请直接联系购买的门店！门店将为你处理，让你售后无忧！</text>
						</div>
					</div>
					<div>
						<div class="details_order" v-if="itemList.length !=0">
							<div class="details_order_item" v-for="item in itemList">
<!--                {{item}}-->
								<div class="details_order_item_img">
									<image style="width:170px;height:170px" :src="item.thumbnail"></image>
								</div>
								<div class="details_order_item_content">
									<div class="details_order_item_content_top">
										<text class="details_order_item_title">{{item.name}}</text>
										<div style="display: flex;flex-direction: column">

                      <div style="display: flex;flex-direction: row" v-if="item.point>0">
                        <text class="details_order_red_icon">兑换券:</text>
                        <text class="details_order_red_font">{{item.point | number}}</text>
                      </div>

											<div style="display: flex;flex-direction: row" v-else>
												<text class="details_order_red_icon">¥</text>
												<text class="details_order_red_font">{{item.price | price}}</text>
											</div>

										</div>
									</div>
									<div class="details_order_item_content_bottom">
										<text class="details_order_item_subtitle">{{item.subTitle}}</text>
										<text class="details_order_item_number"> x {{item.quantity | number}}</text>
									</div>
								</div>
							</div>

							<div class="details_order_item_bottom">
								<div class="row_sb_mg20" v-if="orderForm.subPoint<=0">
									<text class="details_order_item_bottom_titel">商品总价</text>
									<div style="display: flex;flex-direction: row">
										<text class="details_order_black_icon">¥</text>
										<text class="details_order_black_font">{{orderForm.subPrice}}</text>
									</div>
								</div>
								<div class="row_sb_mg20" v-if="orderForm.subPoint<=0">
									<text class="details_order_item_bottom_titel">店铺优惠：</text>
									<div style="display: flex;flex-direction: row">
										<text class="details_order_black_icon">¥</text>
										<text class="details_order_black_font">{{orderForm.discount}}</text>
									</div>
								</div>
								<div class="row_sb_mg20">
									<text class="details_order_item_bottom_titel">运费：</text>
									<div style="display: flex;flex-direction: row">
										<text class="details_order_black_icon">¥</text>
										<text class="details_order_black_font">{{orderForm.freight}}</text>
									</div>
								</div>
								<div class="row_sb_mg20" v-if="orderForm.subPoint<=0">
									<text class="details_order_item_bottom_totalTitel">应付款：</text>
									<div style="display: flex;flex-direction: row">
										<text class="details_order_red_icon">¥</text>
										<text class="details_order_red_font">{{orderForm.amountPayable}}</text>
									</div>
								</div>
                <div class="row_sb_mg20" v-if="orderForm.subPoint > 0">
                  <text class="details_order_item_bottom_totalTitel">兑换券：</text>
                  <div style="display: flex;flex-direction: row">
                    <text class="details_order_red_icon">¥</text>
                    <text class="details_order_red_font">{{orderForm.subPoint  | number}}</text>
                  </div>
                </div>

              </div>
						</div>
					</div>


					<div>
						<div class="submit_payMethod" v-if="payments.length != 0">
							<div class="submit_payMethod_Header">
								<text class="submit_payMethod_Header_Title">支付方式</text>
							</div>
							<div class="submit_payMethod_Content" v-for="item in payments">
								<div class="submit_payMethod_Content_Column">
									<text class="submit_payMethod_Content_Title">{{item.paymentPluginName}}</text>
									<text style="margin-left:10px;" class="submit_payMethod_Content_Date" v-if="item.attach.quantity !=underfind && (item.paymentPluginId == 'waterTicketPayPlugin' || item.paymentPluginId == 'couponCodePayPlugin')">(抵扣{{item.attach.quantity}}张)</text>
								</div>
								<text class="submit_payMethod_Content_SubTitle" v-if="item.paymentPluginId == 'groupPayPlugin'">兑换{{item.quantity | number}}</text>
								<text class="submit_payMethod_Content_SubTitle" v-if="item.paymentPluginId != 'groupPayPlugin'">¥{{item.amount | price}}</text>
							</div>
						</div>
					</div>
					<div>
						<div class="details_order_information">
              <div class="submit_payMethod_Header" style="margin-bottom: 20px">
                <text class="submit_payMethod_Header_Title">订单信息</text>
              </div>
							<div class="details_information_row">
								<text class="details_information_row_title">订单编号</text>
								<text class="details_information_row_content">{{orderForm.sn}}</text>
								<div class="details_information_row_line"></div>
								<text class="details_information_row_botton" @click="copyClick">复制</text>
							</div>
							<div class="details_information_row">
								<text class="details_information_row_title">下单时间</text>
								<text class="details_information_row_content">{{orderForm.createDate}}</text>
							</div>
                            <div class="details_information_row" v-if="orderForm.shippingMethod == 2">
                                <text class="details_information_row_title">预计送达</text>
                                <text class="details_information_row_content">{{orderForm.estimateDate}}</text>
                            </div>
                            <div class="details_information_row">
                                <text class="details_information_row_title">配送方式</text>
                                <text class="details_information_row_content">{{orderForm.shippingMethod == 0 ?'普通快递':orderForm.shippingMethod == 1?'门店自提':'同城配送'}}</text>
                            </div>
                            <div class="details_information_row" v-if="orderForm.memo != null">
                                <text class="details_information_row_title">订单备注</text>
                                <text class="details_information_row_content">{{orderForm.memo}}</text>
                            </div>
						</div>
					</div>

					<div style="width:100%;height:100px;"></div>
					<!-- 待付款 -->
					<div class="details_botton" v-if="orderForm.orderStatus == 0 && orderForm.paymentStatus == 0 && orderForm.shippingStatus == 0 ">
						<div class="details_botton_box" @click="cancelClick(orderForm.id)">
							<text class="details_botton_box_title">取消订单</text>
						</div>
						<div v-if="timeType == false" class="detaisl_botton_color_box botton_Bg_Color" @click="paymentClick()">
							<text class="details_botton_color_box_title botton_Fz_Color">付款</text>
						</div>
					</div>
					<!-- 待发货 -->
					<div class="details_botton" v-if="orderForm.paymentStatus == 1 && orderForm.shippingStatus == 0 && orderForm.orderStatus == 1">
                        <div class="details_botton_box" @click="extractCodeClick(orderForm.id)" v-if="orderForm.shippingMethod == 1">
                            <text class="details_botton_box_title">显示提货码</text>
                        </div>
            <div class="details_botton_box" @click="refundsclick" v-if="!orderForm.groupBuyId">
							<text class="details_botton_box_title">退款</text>
						</div>
						<div class="detaisl_botton_color_box botton_Bg_Color" @click="clockClick">
							<text class="details_botton_color_box_title botton_Fz_Color">提醒发货</text>
						</div>
						<div class="detaisl_botton_color_box" style="background-color:#07c160" @click="transferClick" v-if="!orderForm.giftCardId && transfer_Type == 1">
							<text class="details_botton_color_box_title botton_Fz_Color">转赠好友</text>
						</div>
					</div>
					<!-- 已发货 -->
					<div class="details_botton" v-if="orderForm.paymentStatus == 1 && orderForm.shippingStatus == 1 && orderForm.orderStatus == 1">
                        <div class="details_botton_box" @click="extractCodeClick(orderForm.id)" v-if="orderForm.shippingMethod == 1">
                            <text class="details_botton_box_title">显示提货码</text>
                        </div>
                        <div class="details_botton_box" @click="logisticsClick" v-if="orderForm.shippingMethod != 1">
							<text class="details_botton_box_title">查看物流</text>
						</div>
						<div class="details_botton_box" @click="refundsclick" v-if="!orderForm.groupBuyId">
							<text class="details_botton_box_title">退货</text>
						</div>
						<div class="detaisl_botton_color_box botton_Bg_Color" @click="receivedClick">
							<text class="details_botton_color_box_title botton_Fz_Color">确认收货</text>
						</div>
					</div>
					<!-- 已完成 -->
					<div class="details_botton" v-if="orderForm.paymentStatus == 1 && orderForm.shippingStatus == 1 && orderForm.orderStatus ==2">
						<div class="detaisl_botton_color_box botton_Bg_Color" @click="evaluationClick">
							<text class="details_botton_color_box_title botton_Fz_Color">评价</text>
						</div>
						<div class="detaisl_botton_color_box botton_Bg_Color" @click="again(orderForm.id)" v-if="!orderForm.groupBuyId">
							<text class="details_botton_color_box_title botton_Fz_Color">再次购买</text>
						</div>
					</div>
					<!-- 已关闭 -->
					<div class="details_botton" v-if="orderForm.orderStatus == 3 || orderForm.orderStatus == 4">
						<div class="details_botton_box" @click="delClick(orderForm.id)">
							<text class="details_botton_box_title">删除订单</text>
						</div>
						<div class="detaisl_botton_color_box botton_Bg_Color" @click="again" v-if="!orderForm.groupBuyId">
							<text class="details_botton_color_box_title botton_Fz_Color">再次购买</text>
						</div>
					</div>
				</div>
			</cell>
		</list>
		<!-- 转赠弹窗 -->
		<div class="isMask" v-if="transferType == true">
			<div class="isMaskContent">
				<image class="content_img" src="http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/upload/image/giftCardBox.png"></image>
				<div>
					<text class="content_title">生成卡券提示</text>
					<text class="giftNumTitle">共生成{{giftNum}}张礼卡</text>
					<text class="content_subtitle">1: 生成的卡券可在”我的券/卡”里查看</text>
					<text class="content_subtitle">2: 生成的卡券可以转让他人和立即使用 </text>
					<text class="content_subtitle">3: 生成的卡券可在”我的券、卡”内转让好友</text>
				</div>
				<div class="content_botton">
					<div class="content_botton_left" @click="transferCancel">
						<text class="content_botton_left_title">取消</text>
					</div>
					<div class='content_botton_right' @click="saveTransferClick">
						<text class="content_botton_right_title">确定</text>
					</div>
				</div>
			</div>
		</div>
    <extractCode ref="extract" :orderId="orderForm.id" @cancelClick="qrcodeCancelClick" v-if="extractCodeType == true"></extractCode>
	</div>
</template>

<script>
    const communication = app.requireModule("eeui/communication");
	const storage = weex.requireModule('storage')
	const modal = weex.requireModule('modal')
	import myNavbar from '../../../components/myNavbar/myNavbar.vue'
    import extractCode from '../../../components/extractCode/extractCode.vue'
	import {
		find,
		cancel,
		received,
		reminder,
		payment,
		del
	} from '../../../api/order';

	import {
		create
	} from '../../../api/giftCard.js'
	import {
		submit,
		query
	} from '../../../api/payment';
	import {
		buyForOrder
	} from '../../../api/cart'

	const eeui = app.requireModule('eeui');
	const pay = app.requireModule("eeui/pay");
	export default {
		data() {
			return {
				img: 'https://icweiliimg1.pstatp.com/weili/l/540018848208912837.webp',
				orderForm: {},
				id: '',
				transferType: false,
				orderLog: '',
				currentTab: 0,
				payments: [],
				left_time: "00:00",
				timeType: false,
				itemList: [],
				timer: null,
                shopName:'',
                shopPhone:'',
                extractCodeType:false

			}
		},
		created() {
			this.initIconFont()
			this.id = eeui.getPageInfo('componentsOrder').params
		},
		filters: {
			price(value) {
				var toFixedNum = Number(value).toFixed(3);
				var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
				return realVal;
			},
			number(value) {
				var toFixedNum = Number(value).toFixed(0);
				return toFixedNum;
			}
		},
		components: {
			myNavbar,extractCode
		},
		mounted() {
			this.findClick(this.id)
		},
		beforeDestroy() {
			console.log('销毁计时器')
			clearInterval(this.timer);
		},
		methods: {
			saveTransferClick() {
				create({
					orderId: this.id
				}).then(res => {
					if (res.type == 'success') {
						eeui.toast('创建成功')
						this.transferType = false
						this.findClick(this.id)
						eeui.openPage({
							url: 'root://pages/member/giftCard/giftCard.js',
							statusBarType: 'immersion',
							statusBarStyle: false
						}, (result) => {});
					}

				})
			},
			transferClick() {
				this.transferType = !this.transferType
			},
			transferCancel() {
				this.transferType = false

			},
			findClick(data) {
				console.log(data)
				var _this = this
				find(data).then(
					res => {
						if (res.type == 'success') {
							_this.orderForm = res.data.order
							_this.orderForm.createDate = _this.formatTime(_this.orderForm.createDate)
							_this.orderForm.estimateDate=_this.format(_this.orderForm.estimateDate)
							if (!this.isEmptyString(res.data.orderLog)) {
								res.data.orderLog.forEach(function(item) {
									item.createDate = _this.formatTime(item.createDate)
								})
								_this.orderLog = res.data.orderLog
							}
							_this.orderForm.itemList.forEach(function(item) {
								item.thumbnail = _this.thumbnail(item.thumbnail, 170, 170)
							})
							_this.itemList = _this.orderForm.itemList
							res.data.payments.forEach(item => {
								item.attach = JSON.parse(item.attach)
							})
							_this.payments = res.data.payments;
							if (res.data.order.paymentStatus == 0) {
								_this.countDown(res.data.order.createDate)
							}
                            _this.shopName = res.data.shopName
                            _this.shopPhone = res.data.telephone
						}
					}
				).catch(error => {
					console.log(error)
				})
			},
			copyClick() {
				eeui.copyText(this.orderForm.sn)
				eeui.toast('复制成功')
			},
			countDown: function(data) {
				var that = this;
				console.log(data)
				that.timer = setInterval(function() {
					var create_time = data.replace(/-/g, "/");
					console.log(create_time)
					//计算剩余时间差值
					var leftTime = (new Date(create_time).getTime() + 30 * 60 * 1000) - (new Date().getTime());
					if (leftTime > 0) {
						//计算剩余的分钟
						var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);
						//计算剩余的秒数
						var seconds = parseInt(leftTime / 1000 % 60, 10);
						that.left_time = minutes + "分" + seconds + "秒";
						that.timeType = false
					} else {
						//移除超时未支付的订单
						that.timeType = true
					}
				}, 1000);
			},
			cancelClick(data) {
				console.log(data)
				var _this = this
				eeui.confirm({
					title: "确认取消订单?",
					message: "取消后可在已关闭订单再次购买？",
					buttons: ["取消", "确定"]
				}, function(result) {
					if (result.status == "click" && result.title == "确定") {
						_this.loadCancel(data)
					}
				});
			},
			loadCancel(data) {
				var _this = this
				console.log(data)
				cancel(data).then(
					res => {
						console.log(res)
						if (res.type == 'success') {
							eeui.toast(res.content)
							_this.findClick(_this.id)
							storage.setItem('order', 'true', event => {
								console.info('set success')
							})
						}
					}
				).catch(error => {
					eeui.toast(error.content)
				})
			},
			clockClick() {
				var _this = this
				reminder(_this.id).then(
					res => {
						console.log(res)
						if (res.type == 'success') {
							eeui.toast(res.content)
						}
					}
				).catch(error => {
					eeui.toast(error.content)
				})
			},
			refundsclick() {
				var _this = this
				eeui.openPage({
						pageName: 'orderDetails',
						params: this.id,
						url: 'root://pages/member/order/refund.js',
						statusBarType: 'immersion',
						statusBarStyle: false
					},
					(result) => {
						if (result.status == 'stop') {
							_this.findClick(_this.id)
						}
					}
				);
			},
			logisticsClick() {
				eeui.openPage({
						pageName: 'orderDetails',
						params: this.id,
						url: 'root://pages/member/logistics/list.js',
						statusBarType: 'immersion',
						statusBarStyle: false
					},
					(result) => {
						console.log('成功')
					}
				);
			},
			receivedClick() {
				var _this = this
				eeui.confirm({
					title: "提示?",
					message: "是否确认收货？",
					buttons: ["取消", "确定"]
				}, function(result) {
					if (result.status == "click" && result.title == "确定") {
						received(_this.id).then(
							res => {
								if (res.type == 'success') {
									eeui.toast(res.content)
									_this.findClick(_this.id)
									// _this.confirmClick()
									storage.setItem('order', 'true', event => {
										console.info('set success')
									})
								}
							}
						).catch(error => {
							console.log(error)
						})
					}
				});
			},
			confirmClick() {
				eeui.openPage({
						url: 'root://pages/member/order/confirm.js',
						statusBarType: 'immersion',
						statusBarStyle: false
					},
					(result) => {

					}
				);
			},
			delClick() {
				var _this = this
				eeui.confirm({
					title: "提示?",
					message: "是否确认删除？",
					buttons: ["取消", "确定"]
				}, function(result) {
					if (result.status == "click" && result.title == "确定") {
						del(_this.id).then(
							res => {
								if (res.type == 'success') {
									eeui.closePage();
									eeui.toast('删除成功')
									storage.setItem('order', 'true', event => {
										console.info('set success')
									})
								}
							}
						).catch(error => {
							console.log(error)
						})
					}
				});
			},
			evaluationClick() {
				var _this = this
				eeui.openPage({
						pageName: 'orderDetails',
						params: this.id,
						url: 'root://pages/member/order/evaluation.js',
						statusBarType: 'immersion',
						statusBarStyle: false
					},
					(result) => {
						if (result.status == 'stop') {
							_this.findClick(_this.id)
						}
					}
				);
			},
			again() { // 再次购买
				var _this = this
				var product = this.orderForm.itemList[0]
				let data = {}
				data.orderId = product.orderId
				data.uuid = _this.getGlobalData().uuid
				buyForOrder(data).then(
					res => {
						console.log(res)
						if (res.type == 'success') {
							eeui.openPage({
								url: 'root://pages/goods/submit/index.js',
								statusBarType: 'immersion',
								statusBarStyle: false
							})
						}
					}
				).catch(error => {
					eeui.toast('服务器开小差了，请重新点击购买')
				})
			},
			paymentClick() {
				var _this = this
				payment(this.orderForm.id).then(res => {
					console.info(res)
					if (res.type == 'success') {
						console.log(res)
						_this.submitClick(res)
					} else {
						eeui.toast('支付失败')
					}
				}).catch(error => {
					eeui.toast(error.content)
				})
			},

			submitClick(data) {
				var _this = this
				_this.sn = data.data.sn
				submit({
					paymentPluginId: 'weixinAppPayPlugin',
					sn: data.data.sn
				}).then(res => {
					console.info(res)
					if (res.type == 'success') {
						pay.weixin({
							appid: res.data.appid,
							partnerid: res.data.partnerid,
							prepayid: res.data.prepayid,
							package: res.data.package,
							noncestr: res.data.noncestr,
							timestamp: res.data.timestamp,
							sign: res.data.paySign,
						}, result => {
							console.log(result)
							if (result.status == 0) {
								_this.findClick(_this.id)
							} else if (result.status == -1) {
								eeui.toast('服务器出错，请稍后重试')
							} else if (result.status == -2) {
								eeui.toast('您已取消支付')
							} else if (result.status == -999) {
								eeui.toast('开启微信失败')
							}
						})
					} else {
						eeui.toast('支付失败')
					}
				}).catch(error => {
					console.log(error)
					eeui.toast('支付失败')
				})
			},
            toCall(){
                communication.call(this.shopPhone, (res) => {

                })
            },
            extractCodeClick(data){
                console.log(data)
                var _this = this
                this.extractCodeType = !this.extractCodeType
            },
            qrcodeCancelClick(){
                this.extractCodeType = !this.extractCodeType
            },
		}
	}
</script>
<style lang="css" src="../../../style/wx.css" />
<style scoped>
    .app, body {
        background-color: rgba(248, 248, 248, 0.8);
    }
    .app{
        flex: 1;
    }
    .details_box_header_bg {
        width: 750px;
        height: 360px;
        position: absolute;
        top: 0;
        z-index: -1;
    }

    .details_status {
        padding-left: 50px;
        padding-right: 50px;
        box-sizing: border-box;
        z-index: 0;
        margin-top: 40px;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }

    .details_status_title {
        font-size: 44px;
        font-weight: 600;
        color: rgba(255, 255, 255, 1);
        /*line-height: 56px;*/
    }
	.submit_payMethod_Content_Date {
	  font-size: 24px;
	  font-weight: 400;
	  color: rgba(26, 26, 30, 0.3);
	  line-height: 36px;
	  /* display: block; */
	  /* margin-top: 10rpx; */
	}
    .details_status_subtitle {
        font-size: 24px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        margin-left: 25px;
        margin-bottom: 2px;
    }


    .title2 {
        color: gray;
        font-size: 36px;
        font-family: iconfont2;
        margin: 0 20px;
        color: #cccccc;
    }
    .details_address {
        width: 700px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-left: 25px;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 25px;
        padding-left: 25px;
        padding-right: 25px;
        padding-bottom: 25px;
        box-sizing: border-box;
    }

    .details_address_top {
        margin-bottom: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .details_address_name {
        font-size: 28px;
        font-weight: 500;
        color: rgba(26, 26, 30, 1);
    }

    .details_address_phone {
        font-size: 28px;
        font-weight: 500;
        color: rgba(26, 26, 30, 1);
        margin-left: 10px;
    }

    .details_address_bottom {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .details_address_title {
        font-size: 24px;
        font-weight: 400;
        width: 570px;
        color: rgba(26, 26, 30, 1);
        /*margin-left: 12px;*/
    }

    .details_address_label {
        /*width: 66px;*/
        /*height: 34px;*/
        border-style: solid;
        border-width: 2px;
        border-color: rgba(235, 89, 79, 1);
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .details_address_label_box {
        width: 66px;
        height: 34px;
        background-color: rgba(235, 89, 79, 1);
        border-style: solid;
        border-width: 1px;
        border-color: white;
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }

    .details_address_label_title {
        font-size: 18px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }

    .details_order {
        width: 700px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-left: 25px;
        margin-top: 20px;
        padding-top: 40px;
        padding-bottom: 30px;
        padding-left: 25px;
        padding-right: 25px;
        box-sizing: border-box;
    }

    .details_order_item {
        display: flex;
        flex-direction: row;
        margin-bottom: 40px;
    }

    .details_order_item_img {
        width: 170px;
        height: 170px;
        background: rgba(250, 250, 250, 1);
        border-radius: 4px;
        overflow: hidden;
    }

    .details_order_item_content {
        display: flex;
        flex-direction: column;
        width: 460px;
        margin-left: 20px;
        position: relative;
    }

    .details_order_item_content_top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    .details_order_item_title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        text-overflow: ellipsis;
        lines: 2;
        /*width: 370px;*/
        width: 300px;

    }

    .details_order_item_price {
        font-size: 18px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
    }

    .details_order_item_content_bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .details_order_item_subtitle {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
    }

    .details_order_item_number {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
    }

    .details_order_item_bottom {
        padding-top: 40px;
        border-top-color: rgba(232, 234, 237, 1);
        border-top-width: 1px;
        border-top-style: solid;
    }

    .row_sb_mg20 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .details_order_item_bottom_titel {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
    }

    .details_order_item_bottom_price {
        font-size: 18px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
    }

    .details_order_item_bottom_totalTitel {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
    }

    .details_order_item_bottom_totalPrice {
        font-size: 30px;
        font-weight: 500;
        color: rgba(235, 89, 79, 1);
        line-height: 36px;
    }

    .details_order_red_icon {
        font-size: 20px;
        font-weight: 500;
        color: rgba(231, 91, 83, 1);
        line-height: 42px;
    }

    .details_order_red_font {
        font-size: 28px;
        font-weight: 500;
        color: rgba(231, 91, 83, 1);
        line-height: 42px;
    }

    .details_order_black_icon {
        font-size: 20px;
        font-weight: 500;
        color: black;
        line-height: 42px;
    }

    .details_order_black_font {
        font-size: 28px;
        font-weight: 500;
        color: black;
        line-height: 42px;
    }

    .details_order_information {
        width: 700px;
        padding: 40px 25px 10px 25px;
        border-radius: 16px;
        background-color: white;
        box-sizing: border-box;
        margin-left: 25px;
        margin-top: 20px;
        margin-bottom: 30px;
    }

    .details_botton {
        width: 750px;
        height: 94px;
        background-color: rgba(255, 255, 255, 1);
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        position: fixed;
        bottom: 0;
    }

    .details_botton_box {
        width: 160px;
        height: 56px;
        border-color: rgba(126, 128, 136, 0.8);
        border-style: solid;
        border-width: 1px;
        border-radius: 4px;
        margin-right: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .details_botton_box_title {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 0.5);
        line-height: 56px;
    }

    .detaisl_botton_color_box {
        width: 160px;
        height: 56px;
        /* background: linear-gradient(129deg, rgba(237, 86, 75, 1), rgba(245, 113, 74, 1)); */
        opacity: 0.8;
        border-radius: 4px;
        margin-right: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .detaisl_botton_color_no_box {
        width: 160px;
        height: 56px;
        background-color: #888888;
        opacity: 0.8;
        border-radius: 4px;
        margin-right: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .details_botton_color_box_title {
        font-size: 24px;
        font-weight: 400;
        line-height: 56px;
        /* color: rgba(255, 255, 255, 1); */
    }

    .details_order_item_botton {
        width: 136px;
        height: 48px;
        border: 1px solid rgba(126, 128, 136, 0.5);
        border-radius: 4px;
        position: absolute;
        bottom: 0px;
        right: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .details_order_item_bottonTitle {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 0.8);
    }

    .details_order_item_status {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
    }

    .details_order_item_status_left {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
    }

    .details_order_item_status_right {
        font-size: 24px;
        font-weight: 400;
        color: rgba(103, 130, 192, 1);
        line-height: 36px;
    }

    .details_information {
        width: 700px;
        margin-left: 25px;
        background-color: white;
        border-radius: 16px;
        margin-top: 30px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: content-box;
    }

    .details_information_title {
        display: block;
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
    }

    .details_information_title_current {
        display: block;
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.8;
    }

    .details_information_left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .details_information_line {
        width: 1px;
        height: 50px;
        box-sizing: border-box;
        border-left-width: 2px;
        border-left-style: solid;
        border-left-color: rgba(0, 0, 0, 0.2);
    }

    .details_information_line_current {
        width: 1px;
        height: 50px;
        border-left-color: rgba(237, 86, 75, 0.719);
        border-left-style: dashed;
        border-left-width: 2px;
        box-sizing: border-box;
    }

    .details_information_round {
        width: 50px;
        height: 50px;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .details_information_round_current {
        width: 50px;
        height: 50px;
        background-image: linear-gradient(129deg, rgba(237, 86, 75, 0.719), rgb(247, 150, 120));
        border-radius: 50%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .details_information_icon {
        font-family: iconfont2;
        font-size: 20px;

        color: rgba(0, 0, 0, 0.5);
    }

    .details_information_icon_current {

        font-family: iconfont2;
        font-size: 20px;
        color: white;
    }

    .details_information_content {
        display: flex;
        flex-direction: row;
        /* align-items: center; */
    }

    .details_information_text {
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        padding-top: 10px;
    }

    .details_information_row {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 30px;
    }

    .details_information_row_title {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        opacity: 0.5;
        margin-right: 40px;
    }

    .details_information_row_content {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
    }

    .details_information_row_botton {
        font-size: 24px;
        font-weight: 400;
        color: rgba(103, 130, 192, 1);
    }

    .details_information_row_line {
        width: 1px;
        height: 24px;
        background-color: rgba(232, 234, 237, 1);
        margin-left: 20px;
        margin-right: 20px;
    }

    .submit_payMethod {
        width: 690px;
        padding: 25px;
        box-sizing: border-box;
        margin-left: 30px;
        margin-top: 30px;
        background-color: white;
        border-radius: 16px;
    }

    .submit_payMethod_Header_Title {
        font-size: 32px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
    }

    .submit_payMethod_Content {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
        margin-top: 20px;
    }

    .submit_payMethod_Content_Column {
        display: flex;
        flex-direction: row;
    }

    .submit_payMethod_Content_Title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        /* display: block; */
    }

    .submit_payMethod_Content_SubTitle {
        font-size: 24px;
        font-weight: 400;
        color: rgba(231, 91, 83, 1);
        /*line-height: 36px;*/
        display: block;
        /*margin-top: 20px;*/
    }

    .orderDate {
        display: block;
        margin-top: 20px;
        color: white;
        font-size: 30px;
        letter-spacing: 2px
    }
    .navbar {
        width: 750px;
        height: 100px;
    }
    .text {
        font-size: 26px;
    }

	.isMask {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: rgba(0, 0, 0, 0.3);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}

	.isMaskContent {
	  width: 550px;
	  height: 781px;
	  background-color: rgba(255, 255, 255, 1);
	  border-radius: 15px;
	  overflow: hidden;
	  position: relative;
	}
	.content_img {
	  width: 552px;
	  height: 325px;
	}
	.content_title {
	  font-size: 32px;
	  font-weight: 500;
	  color: rgba(51, 51, 51, 1);
	  line-height: 30px;
	  margin-top: 50px;
	  /* margin-bottom: 50rpx; */
	  display: block;
	  text-align: center;
	}

	.content_subtitle {
	  font-size: 24px;
	  font-weight: 500;
	  color: rgba(102, 102, 102, 1);
	  line-height: 40px;
	  margin-bottom: 10px;
	  display: block;
	  padding-left: 40px;
	  padding-right: 40px;
	  box-sizing: border-box;
	}
	.details_shipping{
	  display: flex;
	  align-items: center;
	  flex-direction: row;
	  justify-content: space-between;
	  padding-top: 20px;
	}
	.details_shipping_right{
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	}
	.details_shipping_left{
	  font-size: 24px;
	}
	.details_shipping_right_name{
	  font-size: 24px;
	  color: rgba(0, 0, 0, 0.5);
      margin-top: 20px;
    border-top-color: rgba(0, 0, 0, 0.1);
    border-top-width: 1px;
    border-top-style: solid;
    padding-top: 20px;
	}
	.content_botton {
	  position: absolute;
	  bottom: 40px;
	  display: flex;
	  flex-direction: row;
	  justify-content: center;
	  align-items: center;
	  width: 550px;
	}
	.content_botton_left {
	  width: 201px;
	  height: 68px;
	  background-color: rgba(236, 236, 236, 1);
	  border-radius: 34px;
	  margin-right: 10px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}

	.content_botton_left_title {
	  font-size: 28px;
	  font-weight: 500;
	  color: rgba(51, 51, 51, 1);
	}

	.content_botton_right {
	  width: 201px;
	  height: 68px;
	  background-image: linear-gradient(270deg, rgba(137, 191, 28, 1), rgba(183, 207, 21, 1));
	  border-radius: 34px;
	  margin-left: 10px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	.content_botton_right_title {
	  font-size: 28px;
	  font-weight: 500;
	  color: rgba(255, 255, 255, 1);
	}
	.giftNumTitle{
	  text-align: center;
	display: block;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 26px;
	color: rgba(102, 102, 102, 0.6);
	}
    .details_stores {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .details_stores_title {
        font-size: 28px;
        color: red;
        display: block;
        width: 450px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .details_stores_botton {
        width: 160px;
        height: 40px;
        border-style: solid;
        border-width: 1px;
        border-color: red;
        border-radius: 50px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .details_stores_botton_title {
        font-size: 20px;
        color: red;
        display: block;
    }

    .details_stores_icon {
        font-size: 22px;
        color: red;
        display: block;
        margin-left: 10px;
        font-family: iconfont2;
    }
</style>
